<!-- App.vue -->
<template>
  <div class="app-container">
    <AnimeCard v-for="(card, index) in cardList" :key="index" :title="card.title" :followers="card.followers"
      :highest-rating="card.highestRating" :update-time="card.updateTime" :play-count="card.playCount"
      :gradient="card.gradient" :bg-image="card.bgImage" :bg-image-position="card.bgImagePosition || 'center'" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AnimeCard from '../../../components/AnimeCard.vue'
//引入图片
import img1 from '@/assets/imgs/fan_video/card_bg1.png'
const cardList = ref([

  {
    title: '番剧索引',
    followers: '1,567,890',
    highestRating: '9.5',
    updateTime: '2023-10-14',
    playCount: '3,456万',
    gradient: 'linear-gradient(83.84deg, rgba(255, 139, 244, 0.12) 0%, rgba(255, 139, 244, 0.07) 100%)',
    bgImage: img1,
    bgImagePosition: 'left center'
  },
  {
    title: '类型风格',
    followers: '1,234,567',
    highestRating: '9.4',
    updateTime: '2023-10-13',
    playCount: '7,890万',
    gradient: 'linear-gradient(83.84deg, rgba(108, 226, 169, 0.12) 0%, rgba(108, 226, 169, 0.07) 100%)',
    bgImage: img1,
  },
  {
    title: '首播时间',
    followers: '987,654',
    highestRating: '9.3',
    updateTime: '2023-10-12',
    playCount: '4,321万',
    gradient: 'linear-gradient(83.84deg, rgba(114, 184, 255, 0.12) 0%, rgba(114, 184, 255, 0.07) 100%)',
    bgImage: img1,
    bgImagePosition: 'right center'
  },
  {
    title: '热搜',
    followers: '1,345,678',
    highestRating: '9.7',
    updateTime: '2023-10-17',
    playCount: '6,543万',
    gradient: 'linear-gradient(83.84deg, rgba(255, 122, 122, 0.12) 0%, rgba(255, 122, 122, 0.07) 100%) ',
     bgImage: img1,
  }
])
</script>

<style lang="scss">
.app-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
  background-color: #f0f2f5;


}
</style>
